<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<c:set var="webroot" value="${pageContext.request.contextPath}" />
<script type="text/javascript"
	src="${webroot}/static/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript"
	src="${webroot}/static/js/bootstrap.min.js"></script>
<script type="text/javascript"
	src="${webroot}/static/js/bootstrap-table.js"></script>
<script type="text/javascript"
	src="${webroot}/static/js/app-common-2.00.0.js"></script>
<script type="text/javascript" src="${webroot}/static/js/layer/layer.js"></script>
<script src="${webroot}/static/js/jquery.form.js" type="text/javascript"></script>
<script type="text/javascript"
	src="${webroot}/static/js/dcalendar.picker.js"></script>
<link rel="stylesheet" type="text/css"
	href="${webroot}/static/css/dcalendar.picker.css" />
<link rel="stylesheet" type="text/css"
	href="${webroot}/static/js/layer/skin/layer.css" />
<link rel="stylesheet" type="text/css"
	href="${webroot}/static/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css"
	href="${webroot}/static/css/bootstrap-table.min.css" />
<html lang="en">
<head>
<style type="text/css">
.control-group {
	float: left;
	/* width: 20%; */
	margin-top: 25px;
}

label {
	width: 175px;
	padding-top: 18px;
	font-size: large;
}

th {
	text-align: center;
	height: 35px;
}

td {
	height: 38px;
}

input {
	width: 60px;
}

.layui-btn {
	display: inline-block;
	height: 38px;
	line-height: 38px;
	padding: 0 18px;
	background-color: #009688;
	color: #fff;
	white-space: nowrap;
	text-align: center;
	font-size: 14px;
	border: none;
	border-radius: 2px;
	cursor: pointer;
}
.layui-btn-sm {
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    font-size: 12px;
}
.layui-btn-danger {
    background-color: #FF5722;
}
.layui-btn-normal {
    background-color: #1E9FFF;
    width: 90px;
}
</style>
</head>
<body>
	<div style="padding-left: 20px;">
		<div class="control-group clearfix">
			<label>会员期限选择设置:</label>
		</div>
		<form id="dictGridDiv">
		   <input type="hidden" id="cont">
			<table id="refundId_headLeftTB" class="sui-table" style="width: 60%;">
				<thead class="">
					<tr class="colorhead">
						<th width="150"></th>
					</tr>
				</thead>
				<tbody id="mainLeftDiv" class="pitch custom-js">
				</tbody>
			</table>
		</form>
		<div style="padding-left: 280px;padding-top: 80px;">
		    <input type="button" value="提交" id="adbut" class="layui-btn layui-btn-normal" onclick="save()" />
		</div>
	</div>
</body>
<script type="text/javascript">
    $(function(){
    	select();
    });
    
    function select(){
    	$("#mainLeftDiv").empty()
		$.ajax({
			url : "${webroot}/memberships/querypage",
			type : "POST",
			dataType : "json",
			async : false,
			cache : false,
			success : function(obj) {
			  if(obj.rows != null){
				  for (var i = 0; i < obj.rows.length; i++) {
					  if(obj.rows.length == 1){
						  $("#mainLeftDiv").append('<tr id="'+i+'"><td id="s'+i+'">时长<input type="text" class="'+i+'" value="'+obj.rows[i].duration+'">个月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;所需积分:<input type="text" class="'+i+'" value="'+obj.rows[i].integral+'">分&nbsp;&nbsp;&nbsp;&nbsp;<a class="layui-btn layui-btn-sm layui-btn-danger" onclick="roms('+i+');">删除</a></td></tr>');
						  $("#mainLeftDiv").append('<tr id="1"><td id="s1">时长<input type="text" class="1">个月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;所需积分:<input type="text" class="1">分&nbsp;&nbsp;&nbsp;&nbsp;<a class="layui-btn layui-btn-sm layui-btn-danger" onclick="roms(1);">删除</a>&nbsp;<a id="d1" class="layui-btn layui-btn-sm" onclick="add(1);"><input type="hidden" id="key" value="tj">添加</a></td></tr>'); 
					  }else{
						  if(i == (obj.rows.length-1)){
							  $("#mainLeftDiv").append('<tr id="'+i+'"><td id="s'+i+'">时长<input type="text" class="'+i+'" value="'+obj.rows[i].duration+'">个月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;所需积分:<input type="text" class="'+i+'" value="'+obj.rows[i].integral+'">分&nbsp;&nbsp;&nbsp;&nbsp;<a class="layui-btn layui-btn-sm layui-btn-danger" onclick="roms('+i+');">删除</a>&nbsp;<a id="d'+i+'" class="layui-btn layui-btn-sm" onclick="add('+i+');"><input type="hidden" id="key" value="tj">添加</a></td></tr>');
						  }else{
							  $("#mainLeftDiv").append('<tr id="'+i+'"><td id="s'+i+'">时长<input type="text" class="'+i+'" value="'+obj.rows[i].duration+'">个月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;所需积分:<input type="text" class="'+i+'" value="'+obj.rows[i].integral+'">分&nbsp;&nbsp;&nbsp;&nbsp;<a class="layui-btn layui-btn-sm layui-btn-danger" onclick="roms('+i+');">删除</a></td></tr>');
						  }
					  }
					  if(obj.rows.length == 1){
						  $("#cont").val(i+1);
					  }else{
						  $("#cont").val(i);
					  }
				  }
			  }else{
				 for (var i = 0; i < 2; i++) {
					 if(i == 1){
						 $("#mainLeftDiv").append('<tr id="'+i+'"><td id="s'+i+'">时长<input type="text" class="'+i+'">个月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;所需积分:<input type="text" class="'+i+'">分&nbsp;&nbsp;&nbsp;&nbsp;<a class="layui-btn layui-btn-sm layui-btn-danger" onclick="roms('+i+');">删除</a>&nbsp;<a id="d'+i+'" class="layui-btn layui-btn-sm" onclick="add('+i+');"><input type="hidden" id="key" value="tj">添加</a></td></tr>');
					 }else{
						 $("#mainLeftDiv").append('<tr id="'+i+'"><td id="s'+i+'">时长<input type="text" class="'+i+'">个月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;所需积分:<input type="text" class="'+i+'">分&nbsp;&nbsp;&nbsp;&nbsp;<a class="layui-btn layui-btn-sm layui-btn-danger" onclick="roms('+i+');">删除</a></td></tr>');
					 }
					$("#cont").val(i);
				 }
			  }
			}
		});
    }
    
    function add(s){
    	$("#d"+s).remove();
    	var p = parseInt(s)+1;
    	$("#mainLeftDiv").append('<tr id="'+p+'"><td id="s'+p+'">时长<input type="text" class="'+p+'">个月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;所需积分:<input type="text" class="'+p+'">分&nbsp;&nbsp;&nbsp;&nbsp;<a class="layui-btn layui-btn-sm layui-btn-danger" onclick="roms('+p+');">删除</a>&nbsp;<a id="d'+p+'" class="layui-btn layui-btn-sm" onclick="add('+p+');"><input type="hidden" id="key" value="tj">添加</a></td></tr>');
    	$("#cont").val(parseInt($("#cont").val())+1);
    }
    
    function roms(o){
    	$("#"+o).remove();
    	var sd = $("#key").val();
    	if(sd==undefined){
    		var p = isNum(o);
    	   $("#s"+p).append('&nbsp;<a id="d'+p+'" class="layui-btn layui-btn-sm" onclick="add('+p+');"><input type="hidden" id="key" value="tj">添加</a>');
    	}
    	$("#cont").val(parseInt($("#cont").val())-1);
    }

	function save(){
    	var hiobj = new Object(); var arry=[];
    	var l = parseInt($("#cont").val());
    	l = l +1;
    	for (var j = 0; j < l; j++) {
    		var ss=  $("."+j);
    		hiobj = new Object();
			hiobj.duration = ss[0].value;
			hiobj.integral = ss[1].value;
			arry.push(JSON.stringify(hiobj));
		}
		$.ajax({
			url : "${webroot}/memberships/insert",
			type : "POST",
			data : {
				"obj" : JSON.stringify(arry)
			},
			dataType : "json",
			async : false,
			cache : false,
			success : function(obj) {
				if (obj.success) {
					layer.msg("操作成功");
					setTimeout("select();", 1000);
				}else{
					layer.msg(obj.message);
				}
			}
		});
	}
	 
	function isNum(o){
		var p = parseInt(o)-1;
        for (var i = 0; i < 50; i++) {
    	    var ii = $("#"+p);
    	    if(ii.length == 0){
    	    	p = p -1;
    	    }else{
    	    	break
    	    }
    	}
    	return p;
	}
</script>
</html>